<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-DSL 测试页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <style>
        .result-container {
            max-height: 400px;
            overflow-y: auto;
        }
        .nav-tabs .nav-link.active {
            background-color: #0d6efd;
            color: white;
        }
        .status-success { color: #198754; }
        .status-failed { color: #dc3545; }
        .status-partial { color: #fd7e14; }
        .json-viewer {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="text-center mb-4">
                    <h1>
                        <i class="bi bi-gear"></i> Auto-DSL 测试页面
                    </h1>
                    <p class="lead">通用DSL生成系统</p>
                    <a href="help.html" class="btn btn-outline-info btn-sm" target="_blank">
                        <i class="bi bi-question-circle"></i> 使用说明
                    </a>
                </div>
                
                <!-- 系统状态 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h5 class="card-title">系统状态</h5>
                                <span id="systemStatus" class="badge bg-secondary">检查中...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h5 class="card-title">可用模型</h5>
                                <span id="availableModels" class="badge bg-info">加载中...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h5 class="card-title">支持DSL类型</h5>
                                <span id="supportedTypes" class="badge bg-success">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 主要功能标签页 -->
                <ul class="nav nav-tabs" id="mainTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="dsl-tab" data-bs-toggle="tab" data-bs-target="#dsl-panel" type="button">通用DSL生成</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="business-rule-tab" data-bs-toggle="tab" data-bs-target="#business-rule-panel" type="button">业务规则DSL</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="batch-rule-tab" data-bs-toggle="tab" data-bs-target="#batch-rule-panel" type="button">批量规则解析</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="excel-upload-tab" data-bs-toggle="tab" data-bs-target="#excel-upload-panel" type="button">Excel上传</button>
                    </li>
                </ul>

                <div class="tab-content" id="mainTabContent">
                    <!-- 通用DSL生成 -->
                    <div class="tab-pane fade show active" id="dsl-panel" role="tabpanel">
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5>通用DSL生成</h5>
                            </div>
                            <div class="card-body">
                                <form id="dslForm">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="description" class="form-label">需求描述 *</label>
                                                <textarea class="form-control" id="description" rows="3" placeholder="请描述你需要生成的DSL内容..."></textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label for="dslType" class="form-label">DSL类型 *</label>
                                                <select class="form-select" id="dslType">
                                                    <option value="json">JSON</option>
                                                    <option value="sql">SQL</option>
                                                    <option value="yaml">YAML</option>
                                                    <option value="xml">XML</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">快速加载示例：</label>
                                                <div class="btn-group d-grid gap-2">
                                                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadDslExample('json')">JSON示例</button>
                                                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadDslExample('sql')">SQL示例</button>
                                                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadDslExample('yaml')">YAML示例</button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="model" class="form-label">模型</label>
                                                <select class="form-select" id="model">
                                                    <option value="">使用默认模型</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="examples" class="form-label">参考示例</label>
                                                <textarea class="form-control" id="examples" rows="2" placeholder="每行一个示例..."></textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label for="context" class="form-label">上下文信息</label>
                                                <textarea class="form-control" id="context" rows="2" placeholder='JSON格式，如：{"domain": "电商", "version": "v1.0"}'></textarea>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="maxTokens" class="form-label">最大Token数</label>
                                                    <input type="number" class="form-control" id="maxTokens" value="2000">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="temperature" class="form-label">温度参数</label>
                                                    <input type="number" class="form-control" id="temperature" value="0.7" step="0.1" min="0" max="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary btn-lg">
                                            <span class="spinner-border spinner-border-sm d-none" id="dslSpinner"></span>
                                            生成DSL
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- DSL生成结果 -->
                        <div class="card mt-3 d-none" id="dslResult">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5>生成结果</h5>
                                <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard('dslContent')">复制</button>
                            </div>
                            <div class="card-body">
                                <div class="result-container">
                                    <pre id="dslContent" class="json-viewer"></pre>
                                </div>
                                <div class="mt-3">
                                    <small class="text-muted">
                                        状态: <span id="dslStatus"></span> | 
                                        耗时: <span id="dslDuration"></span>ms |
                                        请求ID: <span id="dslRequestId"></span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 业务规则DSL -->
                    <div class="tab-pane fade" id="business-rule-panel" role="tabpanel">
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5>业务规则DSL生成</h5>
                            </div>
                            <div class="card-body">
                                <form id="businessRuleForm">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="ruleName" class="form-label">规则名称 *</label>
                                                <input type="text" class="form-control" id="ruleName" placeholder="如：作业申请单位校验_必填">
                                            </div>
                                            <div class="mb-3">
                                                <label for="relatedField" class="form-label">关联字段</label>
                                                <input type="text" class="form-control" id="relatedField" placeholder="如：作业申请单位">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="ruleDescription" class="form-label">规则描述 *</label>
                                                <textarea class="form-control" id="ruleDescription" rows="4" placeholder='如：为空提示：{"des": "作业申请单位未填写。", "result": "错误"}'></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 预设规则示例 -->
                                    <div class="mb-3">
                                        <label class="form-label">快速选择示例规则：</label>
                                        <div class="btn-group-vertical d-grid gap-2">
                                            <button type="button" class="btn btn-outline-info btn-sm" onclick="loadRuleExample('required')">必填校验示例</button>
                                            <button type="button" class="btn btn-outline-info btn-sm" onclick="loadRuleExample('format')">格式校验示例</button>
                                            <button type="button" class="btn btn-outline-info btn-sm" onclick="loadRuleExample('range')">范围校验示例</button>
                                        </div>
                                    </div>
                                    
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <span class="spinner-border spinner-border-sm d-none" id="ruleSpinner"></span>
                                            解析业务规则
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- 业务规则结果 -->
                        <div class="card mt-3 d-none" id="businessRuleResult">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5>解析结果</h5>
                                <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard('ruleContent')">复制</button>
                            </div>
                            <div class="card-body">
                                <div class="result-container">
                                    <pre id="ruleContent" class="json-viewer"></pre>
                                </div>
                                <div class="mt-3">
                                    <small class="text-muted">
                                        状态: <span id="ruleStatus"></span> | 
                                        耗时: <span id="ruleDuration"></span>ms |
                                        请求ID: <span id="ruleRequestId"></span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 批量规则解析 -->
                    <div class="tab-pane fade" id="batch-rule-panel" role="tabpanel">
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5>批量业务规则解析</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="batchRules" class="form-label">批量规则数据 (JSON格式)</label>
                                    <textarea class="form-control" id="batchRules" rows="10" placeholder='请输入JSON格式的规则数组...'></textarea>
                                    <div class="form-text">
                                        <button type="button" class="btn btn-link btn-sm p-0" onclick="loadBatchExample()">加载示例数据</button>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-warning btn-lg" onclick="processBatchRules()">
                                        <span class="spinner-border spinner-border-sm d-none" id="batchSpinner"></span>
                                        批量解析
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 批量处理结果 -->
                        <div class="card mt-3 d-none" id="batchResult">
                            <div class="card-header">
                                <h5>批量处理结果</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h6>总数</h6>
                                            <span class="badge bg-primary" id="batchTotal">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h6>成功</h6>
                                            <span class="badge bg-success" id="batchSuccess">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h6>失败</h6>
                                            <span class="badge bg-danger" id="batchFailed">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h6>成功率</h6>
                                            <span class="badge bg-info" id="batchSuccessRate">0%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="result-container">
                                    <div id="batchResults"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Excel上传 -->
                    <div class="tab-pane fade" id="excel-upload-panel" role="tabpanel">
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5>Excel文件上传解析</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-4">
                                    <div class="alert alert-info">
                                        <h6><i class="bi bi-info-circle"></i> Excel文件格式要求：</h6>
                                        <ul class="mb-0">
                                            <li>支持.xls和.xlsx格式</li>
                                            <li>第一行为表头，包含：规则名称、关联属性、规则描述</li>
                                            <li>文件大小不超过10MB</li>
                                            <li>建议使用UTF-8编码</li>
                                        </ul>
                                    </div>
                                </div>

                                <form id="excelUploadForm" enctype="multipart/form-data">
                                    <div class="mb-3">
                                        <label for="excelFile" class="form-label">选择Excel文件 *</label>
                                        <input type="file" class="form-control" id="excelFile" name="file" accept=".xls,.xlsx" required>
                                        <div class="form-text">
                                            <i class="bi bi-download"></i>
                                            <a href="#" onclick="downloadExcelTemplate()" class="text-decoration-none">下载Excel模板</a>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="previewData" checked>
                                            <label class="form-check-label" for="previewData">
                                                上传前预览数据
                                            </label>
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <span class="spinner-border spinner-border-sm d-none" id="uploadSpinner"></span>
                                            <i class="bi bi-upload"></i> 上传并解析
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Excel数据预览 -->
                        <div class="card mt-3 d-none" id="excelPreview">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5>数据预览</h5>
                                <button class="btn btn-sm btn-primary" onclick="processExcelData()">
                                    <i class="bi bi-play"></i> 开始解析
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive" style="max-height: 300px;">
                                    <table class="table table-striped table-sm" id="previewTable">
                                        <thead class="table-dark"></thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">
                                        共 <span id="previewCount">0</span> 行数据
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Excel处理结果 -->
                        <div class="card mt-3 d-none" id="excelResult">
                            <div class="card-header">
                                <h5>Excel处理结果</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>文件名</h6>
                                            <span class="badge bg-secondary" id="excelFilename">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>原始数据</h6>
                                            <span class="badge bg-info" id="excelOriginalCount">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>总数</h6>
                                            <span class="badge bg-primary" id="excelTotal">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>成功</h6>
                                            <span class="badge bg-success" id="excelSuccess">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>失败</h6>
                                            <span class="badge bg-danger" id="excelFailed">0</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="text-center">
                                            <h6>成功率</h6>
                                            <span class="badge bg-info" id="excelSuccessRate">0%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="result-container">
                                    <div id="excelResults"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="demo-data.js"></script>
    <script src="app.js"></script>
</body>
</html>
